<template>
    <div class="main_add">
        <el-card class="card_add">
            <div v-if="$route.params.type==='category'">
                <el-form class="category" :model="category"  label-width="150">
                    <el-form-item label="categoryId">
                        <el-input v-model="category.categoryId" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="description">
                        <el-input v-model="category.description" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="name">
                        <el-input v-model="category.name" placeholder="请输入内容"/>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="$route.params.type==='product'">
                <el-form class="product" :model="product"  label-width="150">
                    <el-form-item label="productId">
                        <el-input v-model="product.productId" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="categoryId">
                        <el-input v-model="product.categoryId" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="name">
                        <el-input v-model="product.name" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="description">
                        <el-input v-model="product.description" placeholder="请输入内容"/>
                    </el-form-item>
                </el-form>
            </div>
            <div v-if="$route.params.type==='item'">
                <el-form class="item" :model="item"  label-width="150">
                    <el-form-item label="itemId">
                        <el-input v-model="item.itemId" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="productId">
                        <el-input v-model="item.productId" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="listPrice">
                        <el-input v-model="item.listPrice" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="unitCost">
                        <el-input v-model="item.unitCost" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="supplierId">
                        <el-input v-model="item.supplierId" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="status">
                        <el-input v-model="item.status" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="attribute1">
                        <el-input v-model="item.attribute1" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="attribute2">
                        <el-input v-model="item.attribute2" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="attribute3">
                        <el-input v-model="item.attribute3" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="attribute4">
                        <el-input v-model="item.attribute4" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="attribute5">
                        <el-input v-model="item.attribute5" placeholder="请输入内容"/>
                    </el-form-item>
                    <el-form-item label="quantity">
                        <el-input v-model="item.quantity" placeholder="请输入内容"/>
                    </el-form-item>
                </el-form>
            </div>
            <el-button @click="submit" type="primary">提交</el-button>
            <el-button @click="back" type="primary" style="margin-left: 60px;">取消</el-button>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios'
import { jwtDecode } from 'jwt-decode';
export default {
    name:   'Add',
    
    data(){
        return{
            type : this.$route.params.type,
            token : localStorage.getItem('token'),
            username:jwtDecode(localStorage.getItem('token')).username,
            category:{
                categoryId:'',
                description:'',
                name:'',
            },
            product:{
                productId:'',
                categoryId:'',
                name:'',
                description:'',
            },
            item:{
                itemId:'',
                productId:'',
                listPrice:'',
                unitCost:'',
                supplierId:'',
                status:'',
                attribute1:'',
                attribute2:'',
                attribute4:'',
                attribute5:'',
                quantity:'',
                
            },
            categories :'',
            products   :''
        }
    },
    methods:{
        
        back(){
            this.$router.back()
        },
        //使用结构赋值进行错误处理
        promise_error_process(promise){
            return promise.then(result=>[null,result])
                           .catch(err=>[err,null])
        },
        async addByCategory(){
            const response = await axios({
                url :  'http://localhost:8081/category',
                method : 'POST',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : this.category
            })
            return response
        },
        async addByProduct(){
            const response = await axios({
                url :  'http://localhost:8081/products',
                method : 'POST',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : this.product
            })
            return response
        },
        async addByItem(){
            const response = await axios({
                url :  'http://localhost:8081/items',
                method : 'POST',
                withCredentials : true,
                headers :{
                    'Content-Type' : 'application/json',
                    'Authorization': this.token // 将token放在请求头中
                },
                data : this.item
            })
            return response
        },
        //根据页面实现跳转
        async submit(){
            console.log(this.type)
            console.log(this.type == 'product')
            let err,result
            if(this.type == 'category')
                [err,result] = await this.promise_error_process(this.addByCategory())
            if(this.type == 'product')
                [err,result] = await this.promise_error_process(this.addByProduct())
            if(this.type == 'item')
                [err,result] = await this.promise_error_process(this.addByItem())
            if(err){
                console.log('请求错误')
            }else{
                console.log(result)
            }
        }
    },
    created(){
        
    }
}
</script>

<style scoped>
.main_add{
    text-align: center;
}
.card_add{
    justify-content: center;
    width: 60%;
    padding: 20px;
    margin: 100px;
    margin-left: 20%;
}
</style>